<template>
  <div class="head-nav-warp flex">
    <div class="nav-left" ref="wrapper">
      <div class="left-scroll flex flex-nowarp" :style="{ width: scrollWidth }">
        <router-link
          to=""
          class="nav-item"
          v-for="(val, key) in navList"
          :key="val.id"
          @click.native="itemActive(val, key)"
          ref="nav_item"
        >
          {{ val.value }}
        </router-link>
      </div>
    </div>
    <router-link to="" class="nav-right" ref="nav_but">分类</router-link>
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import api from "@/api/index";
import { pxToVw } from "@/utils/common";
export default {
  name: "HomeHeadNav",
  data() {
    return {
      navList: [],
      scrollWidth: ""
    };
  },
  methods: {
    // nav 点击
    itemActive(val, key) {
      console.log(val);
      console.log(key);
    },
    setScrollWidth() {},
    // 获取nav列表
    async getNavList() {
      let res = await getHeadNavList({ test: 123 });
      console.log(res);
      if (res && res.code === 1) {
        let data = res.result.data;
        this.getItemMessWidth(data);
        this.navList = data;
        this.offNavBSrcoll();
      }
    },
    // 配置 bscroll
    offNavBSrcoll() {
      let _this = this;
      _this.$nextTick(() => {
        _this.scroll = new BScroll(_this.$refs.wrapper, {
          startX: 0,
          scrollX: true,
          scrollY: false,
          mouseWheel: true,
          click: true,
          probeType: 3
        });
      });
    },
    // 计算nav容器总宽度
    getItemMessWidth(arr) {
      // let item = this.$refs.nav_item;
      let padding = 40; // 子项 内边距
      let textWidth = 35 * 2; // 得到文字单个宽度 模拟
      let width = 0;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].value) {
          width += padding * 2 + textWidth * arr[i].value.length;
        }
      }
      // console.log(item[i].$el.clientLeft);
      console.log(width);
      console.log(pxToVw(width));
      this.scrollWidth = pxToVw(width);
    },
    // 测试
    setRegister() {
      setRegister({ account: 123 }).then(res => {
        console.log(res);
      });
    }
  },
  watch: {},
  computed: {},
  created() {
    this.getNavList();
  },
  mounted() {},
  beforeUpdate() {}
};
</script>

<style scoped lang="scss">
.head-nav-warp {
  width: 100%;
  height: 115px;
  font-size: 0;
  overflow: hidden;
  padding: 0 30px;
  /*padding: 0 31px;*/
  background: $ea645b;
  .nav-left {
    flex: 1;
    position: relative;
    overflow: hidden;
    z-index: 99;
    background: $ea645b;
    .left-scroll {
      //width: 1760px;
      height: 115px;
      .nav-item {
        height: 115px;
        overflow: hidden;
        line-height: 115px;
        //display: inline-block;
        padding: 0 40px;
        //box-sizing: content-box;
        font-size: 54px;
        color: $ff;
        border: none;
      }
    }
  }
  .nav-right {
    width: 135px;
    line-height: 115px;
    text-align: center;
    color: $ff;
    font-size: 54px;
    z-index: 999;
    border: none;
    background: $ea645b;
    box-shadow: -15px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
}
</style>
